<template>
    <div class="set-width pointer">
        <div class="fs-12 fc-lightgrey date-value flex items-center">
            <span class="mg-r-10">{{ monthData }}</span>
            <el-icon><CaretBottom /></el-icon>
        </div>
        <div class="transparent">
            <el-date-picker v-model="monthData" class="reset-select" type="month" placeholder="" size="small"
                value-format="YYYY-MM" @change="handleChange"/>
        </div>
        <!-- <el-select v-model="monthData" class="reset-select" placeholder="请选择" size="small" @change="handleChange">
            <el-option v-for="item in monthOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select> -->
    </div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted, onActivated } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
    month: {
        type: [String, Number],
        default: ''
    }
})

const emits = defineEmits(['update:month', 'change'])

const monthData = ref('')
const monthOptions = ref([])

const fillZero = (val) => {
    return val > 9 ? val : '0' + val
}
const createMonthData = () => {
    monthOptions.value = []
    const year = dayjs().year()
    for (let i = 1; i < 13; i++) {
        monthOptions.value.push({
            label: year + '年' + i + '月',
            value: year + '-' + fillZero(i)
        })
    }
}

const setDefaultValue = () => {
    const date = new Date()
    const month = date.getMonth()
    monthData.value = month
    emits('update:month', monthData)
}

const handleChange = (ev) => {
    emits('update:month', ev)
    emits('change', ev)
}

watch(() => props.month, (newval) => {
    if (newval) {
        monthData.value = newval
    }
}, {
    immediate: true
})

onMounted(() => {
    // createMonthData()
})
</script>
<style lang="scss" scoped>
.set-width {
    width: 70px !important;
    position: relative;
}
.transparent {
    opacity: 0;
}

.reset-select {
    // width: 100px !important;
    // opacity: 0;
}

.date-value {
    position: absolute;
}

:deep(.reset-select .el-input__wrapper) {
    box-shadow: none;
    background: transparent;
}

:deep(.el-select) {
    --el-select-border-color-hover: transparent;
    --el-select-input-focus-border-color: transparent;
    --el-input-text-color: var(--el-color-black);
}
</style>